<template style="background-color: whitesmoke;width: 100%">
  <div>
    <Header></Header>
    <div style="max-width: 1000px;margin:60px auto auto auto;box-shadow:0 0 10px 10px rgba(0,0,0,0.15);">
      <el-row>
        <el-col  :span="16" style="background-color: white;height: 500px">
          <div style="width: 70%;margin:100px auto auto auto">
            <el-row style="margin-bottom: 30px">
              <el-col :span="5">
                <div class="col-left">
                  项目名称：
                </div>
              </el-col>
              <el-col :span="19">
                <el-input v-model="project.name" placeholder="项目名称" maxlength="50"></el-input>
              </el-col>
            </el-row>

            <el-row style="margin-bottom: 30px">
              <el-col :span="5">
                <div class="col-left">
                  项目简介：
                </div>
              </el-col>
              <el-col :span="19">
                <el-input v-model="project.introduction" rows="5"  type="textarea" placeholder="项目简介"></el-input>
              </el-col>
            </el-row>


            <el-row style="margin-bottom: 20px">
              <el-col :span="5">
                <div class="col-left">
                  项目镜像：
                </div>
              </el-col>
              <el-col :span="19">
                <el-cascader
                    v-model="project.image"
                    :options="options"
                    :props="{ expandTrigger: 'hover' }"
                    ></el-cascader>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8" style="background-color: #333333;height: 500px; color: white;">
          <div style="margin:100px auto auto auto;width: 70%">
            <div style="text-align: center;font-size: 30px;">
              创 建 项 目
            </div>
            <div style=" border-top: 1px solid rgba(255, 255, 255 ,0.4);margin-bottom: 30px;margin-top: 30px"></div>
            <div style="text-align: center; letter-spacing: 3px;margin-bottom: 20px">
              开启一段学习之旅
            </div>
            <div style="text-align: center; letter-spacing: 3px;margin-bottom: 70px">
              在实践中体验深度学习
            </div>
            <div class="mygreenbtn" @click="createProject">
              创建
            </div>
          </div>

        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import axios from "axios";
export default {
  name: "CreateProject",
  components: {Header},
  data(){
    return {
      project:{
        name:null,
        introduction:null,
        image:null,
      },
      options:[
        {
          label:'tensorflow',
          children:[
            {
              value:'1',
              label:'2.7.1'
            },{
              value: '2',
              label: '1.15.5'
            }
          ]
        },{
          label:'pytorch',
          children: [
            {
              value: '3',
              label:'1.10.2'
            }
          ]
        }
      ]
    }
  },
  methods:{
    createProject(){
      if(this.project.name == null){
        this.$notify.error({
          title: '错误',
          message: '项目名称不能为空'
        });
        return
      }

      if(this.project.image == null || this.project.image.length === 0){
        this.$notify.error({
          title: '错误',
          message: '镜像不能为空'
        });
        return
      }
      this.$axios({
        url:'project',
        method:"post",
        params:{
          token:localStorage.getItem("token")
        },
        data:{
          name:this.project.name,
          image_id:this.project.image[this.project.image.length-1],
          introduction:this.project.introduction,
        }
      }).then(res=>{
        if(res.status === 200){
          this.$notify({
            type: 'success',
            title:"成功",
            message: '创建成功!'
          });
          this.$router.push('/project?id='+res.data.id)
        }else{
          this.$notify.error({
            title: '错误',
            message: res.data,
          });
        }
      }).catch(err=>{
        this.$notify.error({
          title: '错误',
          message: '创建失败',
        });
      })
    }
  }
}
</script>

<style scoped>
.col-left{
  margin-top: 5px;
}
.mygreenbtn{
  letter-spacing: 5px;
  font-size: 18px;
  font-weight: bold;
  background: #9dc15b;
  color: #333333;
  padding: 13px 40px;
  transition: all 0.3s;
  text-align: center;
  width: fit-content;
  margin: auto;
}
.mygreenbtn:hover{
  background: white;
  color: #9dc15b;
  transition: all 0.3s;
  cursor: pointer;
}
</style>